revision:
It allows sophisticated selection of the glyphs used to render its child character data.
Deprecated - no longer recommended
Attributes: x, y, dx, dy, rotate, glyphRef, format, xlink:href
It defines a substitution representation for glyphs.
Deprecated - no longer recommended
Attributes: no specific attributes
It provides a set of candidates for glyph substitution by the <altGlyph> element.
Deprecated - no longer recommended
Attributes: no specific attributes
It defines a single glyph in an SVG font.
Deprecated - no longer recommended
Attributes: d, horiz-adv-x, vert-origin-x, vert-origin-y, vert-adv-y, unicode, glyph-name, orientation, arabic-form, lang
codes:
<svg width="400px" heigsht="50px" version="1.1"></svg>
<defs>
<font id="Font1" horiz-adv-x="1000">
<font-face font-family="Super Sans" font-weight="bold" font-style="normal" units-per-em="1000"
cap-height="600" x-height="400" ascent="700" descent="300" alphabetic="0" mathematical="350"
ideographic="400" hanging="500">
<font-face-src>
<font-face-name name="Super Sans Bold"/>
</font-face-src>
</font-face>
<missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
<glyph unicode="!" horiz-adv-x="80" d="M0,0h200v200h-200z"></glyph>
<glyph unicode="@" d="M0,50l100,300l400,100z"></glyph>
</font>
</defs>
<text x="100" y="100" style="font-family: 'Super Sans', Helvetica, sans-serif; font-weight: bold; font-style: normal">Text
using embedded font!</text>
</svg>
It provides a single possible glyph to the referencing <altGlyph> substitution.
Deprecated - no longer recommended
Attributes: x, y, dx, dy, glyphRef, format, xlink:href
To render text along the shape of a <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element.
Attributes: href, lengthAdjust, method, path, side, spacing, startOffset, textLengh
codes:
<svg viewBox="0 0 100 100">
<!-- to hide the path, it is usually wrapped in a <defs> element -->
<!-- <defs> -->
<path id="MyPath" fill="none" stroke="red" d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10
10,40 Q10,70 45,70 Q70,70 75,50" />
<!-- </defs> -->
<text>
<textPath href="#MyPath"> Quick brown fox jumps over the lazy dog.</textPath>
</text>
</svg>
It draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to <text>, like any other SVG graphics element.
If text is included in SVG not inside of a <text> element, it is not rendered. This is different than being hidden by default, as setting the display property won't show the text.
Attributes: x, y, dx, dy, rotate, lengthAdjust, textLength
codes:
<svg viewBox="0 0 240 80">
<style>
.small { font: italic 13px sans-serif; }
.heavy { font: bold 30px sans-serif; }
/* Note that the color of the text is set with the *
* fill property, the color property is for HTML only */
.Rrrrr { font: italic 40px serif; fill: red; }
</style>
<text x="20" y="35" class="small">My</text>
<text x="40" y="35" class="heavy">cat</text>
<text x="55" y="55" class="small">is</text>
<text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>
The textual content for a <text> SVG element can be either character data directly embedded within the <text> element or the character data content of a referenced element, where the referencing is specified with a <tref> element.
Deprecated - no longer recommended
Attributes: xlink:href
codes:
<svg width="100%" height="100%" viewBox="0 0 500 300">
<defs>
<text id="RefText">Referenced character data </text>
</defs>
<text x="10" y="50" font-size="45" >Inline character data</text>
<text x="50" y="100" font-size="45" fill="red" >
<tref xlink:href="#RefText"/>
</text>
<!-- Show outline of canvas using 'rect' element -->
<rect x="1" y="1" width="450" height="200" fill="none" stroke-width="2" stroke="red"/>
</svg>
It defines a subtext within a <text> element or another <tspan> element. It allows for adjustment of the style and/or position of that subtext as needed.
Attributes: x, y, dx, dy, rotate, lengthAdjust, textLength
codes:
<svg viewBox="0 0 240 40">
<style>
text { font: italic 12px serif; }
tspan { font: bold 10px sans-serif; fill: red; }
</style>
<text x="10" y="30" class="small">You are <tspan>not</tspan> a banana!</text>
</svg>